// 把价格打下来
(function () {
  var btnPrice = document.querySelector("#btn-price");
  var priceSpan = document.querySelector("h1 span");
  btnPrice.onclick = function () {
    changePrice(Number(priceSpan.innerText), Number(priceSpan.innerText) / 10);
  };
  function changePrice(from, to) {
    animateFunc({
      from,
      to,
      totalMs: 6000,
      updateTime: 60,
      onChange(currPrice) {
        priceSpan.innerText = currPrice.toFixed(2);
      },
    });
  }
})();

/**
 * 这里最主要的内容是
 * 1. 自定义属性添加 node.setAttribute('status','playing'|'opened'|'closed');
 * 2. 查询打开了的节点 document.querySelector('.sfq-item-title[status=opened]')
 * 3. 根据title节点获取他的兄弟节点 titleNode.nextElementSibling.style.height = val + 'px';
 * 4. 将交互拆分！！！ 拆分成：1. 循环添加点击事件, 2. 打开事件 3. 关闭事件 4. 切换事件(打开和关闭的封装)
 */

// 手风琴
(function () {
  const MockData = [
    {
      title: "手风琴1",
      items: ["你好", "世界"],
    },
    {
      title: "手风琴2",
      items: ["你好2", "世界2"],
    },
  ];

  const container = document.querySelector(".container");

  function renderData2Page() {
    MockData.map((item, index) => {
      // 创建h1
      var h1 = document.createElement("h1");
      h1.className = "sfq-item-title";
      h1.innerText = item.title;
      h1.setAttribute("status", "closed");
      var ul = document.createElement("ul");
      ul.id = `ul-${index}`;
      ul.className = "sfq-item-content";
      item.items.map((liItem) => {
        var li = document.createElement("li");
        li.innerText = liItem;
        ul.appendChild(li);
      });
      container.appendChild(h1);
      container.appendChild(ul);
    });
  }
  renderData2Page();
  var titles = document.querySelectorAll(".sfq-item-title");
  Array.prototype.slice.call(titles).map((titleItem) => {
    titleItem.onclick = function () {
      toggleSubmenu(this);
    };
  });

  function openSubmenu(subMenuTitle) {
    var currStatus = subMenuTitle.getAttribute("status");
    if (currStatus !== "closed") return;
    subMenuTitle.setAttribute("status", "playing");
    animateFunc({
      from: 0,
      to: 100,
      totalMs: 300,
      onChange(val) {
        subMenuTitle.nextElementSibling.style.height = val + "px";
      },
      onOk() {
        subMenuTitle.setAttribute("status", "opened");
      },
    });
  }
  function closeSubmenu(subMenuTitle) {
    var currStatus = subMenuTitle.getAttribute("status");
    if (currStatus !== "opened") return;
    subMenuTitle.setAttribute("status", "playing");
    animateFunc({
      from: 100,
      to: 0,
      totalMs: 300,
      onChange(val) {
        subMenuTitle.nextElementSibling.style.height = val + "px";
      },
      onOk() {
        subMenuTitle.setAttribute("status", "closed");
      },
    });
  }
  function toggleSubmenu(subMenuTitle) {
    var openedItem = document.querySelector(".sfq-item-title[status=opened]");
    openedItem && closeSubmenu(openedItem);
    openSubmenu(subMenuTitle);
  }
})();
